<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
							<input id="articleStatus" name="articleStatus" type="hidden">
							<input id="smallClass" name="smallClass" type="hidden">
							<input id="attachId" name="attachId" type="hidden" th:value="${attachId}">
							<input id="oldAttachId" name="oldAttachId" type="hidden" th:value="${attachId}">
							<input id="secondAttachId" name="secondAttachId" type="hidden" th:value="${secondAttachId}">
							<input id="oldSecondAttachId" name="oldSecondAttachId" type="hidden" th:value="${secondAttachId}">
							<input id="thirdAttachId" name="thirdAttachId" type="hidden" th:value="${thirdAttachId}">
							<div class="form-group">
								<label class="col-sm-3 control-label">文章大类：</label>
								<div class="col-sm-8">
									<select name="bigClass"  id="bigClass" class="form-control" onchange="selectSmallClass();">
										<option value="">请选择</option>
										<option value="走进秦岭">走进秦岭</option>
										<option value="作品展览">作品展览</option>
										<option value="探索秦岭">探索秦岭</option>
										<option value="中国脊梁">中国脊梁</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">文章小类：</label>
								<div class="col-sm-8">
									<select name="classId"  id="classId" class="form-control" onchange="getSmallClassValue();">

									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">文章标题：</label>
								<div class="col-sm-8">
									<input id="title" name="title" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" id="span1"></label>
								<div class="col-sm-8">
									<textarea id="articleIntroduction" name="articleIntroduction" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" id="span2"></label>
								<div class="col-sm-8">
									<textarea id="authorIntroduction" name="authorIntroduction" class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">列表展示图：</label>
								<div id="uploader" class="wu-example col-sm-8">
									<div class="queueList">
										<div id="dndArea" class="placeholder">
											<div id="filePicker"></div>
											<p>或将照片拖到这里，单次最多可选1张</p>
										</div>
									</div>
									<div class="statusBar" style="display:none;">
										<div class="progress">
											<span class="text">0%</span>
											<span class="percentage"></span>
										</div>
										<div class="info"></div>
										<div class="btns">
											<div id="filePicker2"></div>
											<div class="uploadBtn">开始上传</div>
										</div>
									</div>
								</div>
							</div>
							<div class="form-group" id="div1">
								<label class="col-sm-3 control-label">详情展示图：</label>
								<div id="uploader2" class="wu-example col-sm-8">
									<div class="queueList2">
										<div id="dndArea2" class="placeholder">
											<div id="filePicker21"></div>
											<p>或将照片拖到这里，单次最多可选10张</p>
										</div>
									</div>
									<div class="statusBar" style="display:none;">
										<div class="progress">
											<span class="text">0%</span>
											<span class="percentage"></span>
										</div>
										<div class="info"></div>
										<div class="btns" style="width:208px;">
											<div id="filePicker22"></div>
											<div class="uploadBtn">开始上传</div>
										</div>
									</div>
								</div>
							</div>
							<div class="form-group" id="div2">
								<label class="col-sm-3 control-label">详情轮播图：</label>
								<div class="wu-example col-sm-8" >
									<ul class="rotationList">

									</ul>
									<div class="rotation rotationChange">+ 添加轮播信息</div>
									<div class="rotationChange2" style="display: none">
										<div class="addBox">
											<input class="rotationName" type="text" placeholder="请填写作者名字" />
											<div class="rotationBox">
												<img class="preview"  src="/img/upload.png" />
												<input id="upload_input" type="file" />
												<input type="hidden" id="base64_pay" />
											</div>
										</div>
										<div class="rotationBtn">
											<div class="rotationSureBtn">确定</div>
											<div class="cancelBtn">取消</div>
										</div>
									</div>
								</div>
							</div>
							<div class="form-group">
								<input id="articleContent" name="articleContent" type="hidden">
								<label class="col-sm-3 control-label" id="span3"></label>
								<div class="col-sm-8">
									<div class="ibox-content no-padding">
										<div id="content_sn" class="summernote"></div>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
	</div>
	</div>
	<style>
		.rotationChange{
			color: #00b7ee;
			cursor: pointer;
		}
		.rotationName{
			border: 1px solid #999;
			border-radius: 4px;
			width: 280px;
			line-height: 32px;
			padding: 0 10px;
			font-size: 14px;
			color: #333;
			outline: none;
			background: none;
			margin-bottom: 15px;
		}

		.rotationList{
			padding: 0;
		}

		.rotationList li{
			height: 100px;
			padding-bottom: 20px;
			border-bottom: 1px dashed #f0f0f0;
			list-style: none;
			overflow: hidden;
			margin-bottom: 25px;
		}

		.rotationImg{
			height: 80px;
			float: left;
		}

		.rotationclose{
			float: right;
			height: 18px;
			margin-top: 31px;
			cursor: pointer;
		}

		.rotationList li span{
			width: 120px;
			float: left;
			line-height: 80px;
			color: #333;
			font-size: 14px;
		}

		.rotationBox{
			width: 100px;
			height: 100px;
			position: relative;
		}

		.rotationBox img{
			width: 100%;
			height: 100%;
		}

		.rotationBox input{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			opacity: 0;
		}

		.rotationBtn{
			height: 32px;
			display: flex;
			justify-content: center;
		}

		.rotationBtn div{
			width: 100px;
			line-height: 28px;
			height: 32px;
			background: #00b7ee;
			color: #fff;
			border: none;
			text-align: center;
			border-radius: 4px;
			cursor: pointer;
			margin: 0 10px 20px;
		}

		.rotationBtn .cancelBtn{
			background: #ccc;
		}
	</style>
	<div th:include="include::footer"></div>
	<script type="text/javascript" th:src="@{/js/plugins/webuploader/webuploader.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/webuploader/webuploader_demo.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/webuploader/webuploader_demo2.js}"></script>
	<script type="text/javascript" th:src="@{/js/lrz.js}"></script>
	<script type="text/javascript" th:src="@{/js/exif.js}"></script>
	<script type="text/javascript" src="/js/appjs/system/article/add.js"></script>
	<script>
		$(".rotationChange").click(function () {
			$(".rotationName").val('');
			$(".rotationBox input").val('');
			$(".rotationBox img").attr('src','/img/upload.png');
			$('#base64_pay').val('');
			$(this).hide();
			$(".rotationChange2").show();
		})

		$(".cancelBtn").click(function () {
			$(".rotationChange2").hide();
		})

		$(".rotationBox input").change(function() {
			var up_file = document.getElementById("upload_input").files;
			lrz(up_file[0], {width: 400}, function(res){
				$('#base64_pay').val(res.base64);
			});
			//验证图片格式
			var file = $(".upload_input").val();
			/*
            if(!/.(GIF|JPG|JPEG|PNG|gif|jpeg|png|jpg)$/.test(file)){
                alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                return false;
            }
            */
			var f = document.getElementById("upload_input").files;
			var filesize = f[0].size;
			//验证图片大小
			var image = new Image();
			image.src = file;
			//将选中符合的图片展示在左侧预览
			var $file = $(this);
			var fileObj = $file[0];
			var windowURL = window.URL || window.webkitURL;
			var dataURL;
			var $img = $(".preview");

			if(fileObj && fileObj.files && fileObj.files[0]){
				dataURL = windowURL.createObjectURL(fileObj.files[0]);
				$img.attr('src',dataURL);
				$(this).parents('.first_day').addClass('current');
			}else{
				dataURL = $file.val();
				var imgObj = $(".preview");
				imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
			}

		});

		$(".rotationSureBtn").click(function () {
			let name = $(".rotationName").val();
			let base64 = $("#base64_pay").val();
			let src = $(".preview").attr('src');
			if(name == ''){
				parent.layer.alert('请填写作者名字');
				return false
			}
			if(base64 == ''){
				parent.layer.alert('请上传作者相关作品');
				return false
			}
			var result = '<li>'
					+'<span>'+name+'</span>'
					+'<img class="rotationImg"  src="'+src+'" />'
					+'<img class="rotationclose"  src="/img/close.png" />'
					+'<input class="save" type="hidden" value="'+base64+'"  />'
					+'</li>'
			$(".rotationList").append(result);
			$(".rotationChange2").hide();
			$(".rotationChange").show();
		})

		$(".rotationList").on('click','.rotationclose',function(){
			$(this).parents('li').remove();
		})
	</script>
</body>
</html>
